<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">

    
</head>

<body>
    <div class="wrap" id="player">
        <!-- 面板 -->
        <div class="panel">
            <div class="panel-heading">

                <!-- 标题 -->
                <h1 class="panel-title">悦听</h1>

                <!-- 搜索 -->
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="请输入要搜索的歌曲或歌手" aria-describedby="basic-addon2" v-model.trim="query" @keyup.enter="searchMusic">
                    <span class="glyphicon glyphicon-search" @click="searchMusic"></span>
                </div>
            </div>
        </div>

        <!-- 内容 -->
        <div class="section">
            <!-- 播放列表 -->
            <div class="musiclist">
                <ul>
                    <li v-for="item in musicList" @click="playMusic(item.id)">
                        <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
                        <p>{{ item.name }}</p>
                        <span class="glyphicon glyphicon-sound-stereo video" aria-hidden="true" v-if="item.mvid != 0" @click.stop="playMv(item.mvid)"></span>
                    </li>
                </ul>
            </div>

            <img src="./images/line.png">

            <!-- 播放动画 -->
            <div class="center" :class="{playing:isPlay}">
                <img src="./images/player_bar.png" class="bar">
                <img src="./images/disc.png" class="disc pic_animator">
                <img :src="musicPic=='' ? './images/cover.png' : musicPic"  class="cover pic_animator">
            </div>
            <img src="./images/line.png">

            <!-- 留言板 -->
            <div class="message">
                <h5 class="title">热门留言</h5>
                <div class="message_list" >
                    <dl v-for="item in hotComments">
                        <dt><img :src="item.user.avatarUrl"></dt>
                        <dd class="username">{{ item.user.nickname }}</dd>
                        <dd class="detail">{{ item.content }}</dd>
                    </dl>
                    
                </div>
            </div>
        </div>

        <!-- 播放器 -->
        <footer>
            <audio :src="musicUrl" controls autoplay loop @play="play" @pause="pause"></audio>
            <div class="video_con" v-if="isShow">
                <video :src="mvUrl" controls></video>
                <div class="mask" @click="hide"></div>
            </div>
            
            
        </footer>
    </div>

    <script src="./js/vue-2.6.12.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>